<template>
  <div id="Homepage">
    <header>     
      <mt-popup v-model="popupVisible" position="left" class="people">
        <div class="information">
          <div @click="modify()">
            <img v-if="HeadImg === ''" src="http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTINUplUqd1AQYbn8spd2FI4XDXPibE6FFsy7jEqbk4Z5M09YD0aFXGmQMMtOhQFRicu2R23Fl3AQ9dw/0" alt="" class="headimgurl">
            <img v-if="HeadImg !== ''" :src='HeadImg' alt="" class="headimgurl">
            <div class="name">
              <span v-text="Name"></span>
              <img v-show="edit" src="../../static/img/edit.png" width="10%" alt=""> 
            </div>                  
          </div>
          <div class="vip">
            <img class="vipImg" src="../../static/img/information/vip.png" alt="" width="20%">
            <span class="vipType">{{vipType}}</span>
            <br />
          </div>
          <div class="menu">
            <!-- <p class="menu-p" @click="move('/')"> -->
            <p class="menu-p" @click="move('/')" v-show="Jurisdiction1">
              <img src="../../static/img/information/record.png" alt="" width="15%" class="menu-pImg">
              <span class="menu-pSpan">业务审批</span>
              <br />
            </p>
            <!-- <p class="menu-p" @click="move('/page3')"> -->
            <p class="menu-p" @click="move('/page3')" v-show="Jurisdiction5">
              <img src="../../static/img/information/xJurisdiction.png" alt="" width="15%" class="menu-pImg">
              <span class="menu-pSpan">权限审批</span>
              <br />
            </p>    
            <!-- <p class="menu-p" @click="move('/page4')"> -->
            <p class="menu-p" @click="move('/page4')" v-show="Jurisdiction4">
              <img src="../../static/img/header/sjjyx.png" alt="" width="15%" class="menu-pImg">
              <span class="menu-pSpan">数据校验</span>
              <br />
            </p>                          
            <!-- <p class="menu-p" @click="move('/page1')"> -->
            <p class="menu-p" @click="move('/page1')" v-show="Jurisdiction2">
              <img src="../../static/img/information/xprice.png" alt="" width="15%" class="menu-pImg">
              <span class="menu-pSpan">通知提醒</span>
              <br />
            </p>    
            <!-- <p class="menu-p" @click="move('/page2')"> -->
            <p class="menu-p" @click="move('/page2')" v-show="Jurisdiction3">
              <img src="../../static/img/information/xsearch.png" alt="" width="15%" class="menu-pImg">
              <span class="menu-pSpan">业务查询</span>
              <br />
            </p>
            <p class="menu-p" @click="move('/expenses')" v-show="Jurisdiction6">
              <img src="../../static/img/information/expenses.png" alt="" width="15%" class="menu-pImg" style="padding:3%">
              <span class="menu-pSpan">财务报销</span>
              <br />
            </p>
                                            
          </div>
        </div> 
      </mt-popup>  
      <img src="../../static/img/header/information.png" @click="popupVisible=true" alt="" width="5%" class="informationImg">
      <div class="hiddenscorll">
          <div class="head">
              <ul class="head_ul">
                <li v-show="item.show" :class="item.larger" @click="move(item.value)" v-for="(item,i) in menuLi" :key="i">{{item.name}}</li>     
                <li :class="larger3" @click="move('/page2')" v-show="Jurisdiction3">业务查询</li>
              </ul>    
              <br />
          </div>
      </div>
      <div class="cover" v-show="cover"></div>    
      <img src="../../static/img/header/menu.png" alt="" width="4%" class="menuImg" :class="menuImgC" @click="menuImg()">
      <div class="menu-div" v-show="menuDiv">
        <p>全部服务</p>
        <hr>
        <div class="menu-fun" @click="move('/')" v-show="Jurisdiction1">
          <img src="../../static/img/header/order.png" alt="" width="40%">
          <p>业务审批</p> 
        </div>
        <div class="menu-fun" @click="move('/page3')" v-show="Jurisdiction5">
          <img src="../../static/img/header/dJurisdiction.png" alt="" width="40%">
          <p>权限审批</p> 
        </div>       
        <div class="menu-fun" @click="move('/page4')" v-show="Jurisdiction4">
          <img src="../../static/img/header/sjjyd.png" alt="" width="40%">
          <p>数据校验</p> 
        </div>            
        <div class="menu-fun" @click="move('/page1')" v-show="Jurisdiction2">
          <img src="../../static/img/header/dprice.png" alt="" width="40%">
          <p>通知提醒</p> 
        </div>      
        <div class="menu-fun" @click="move('/page2')" v-show="Jurisdiction3">
          <img src="../../static/img/header/dsearch.png" alt="" width="40%">
          <p>业务查询</p> 
        </div>
        <div class="menu-fun" @click="move('/expenses')" v-show="Jurisdiction6">
          <img src="../../static/img/header/expenses.png" alt="" width="40%" style="padding:4%">
          <p>财务报销</p> 
        </div>                   
      </div>
    </header>
    <router-view></router-view>
  </div>
</template>

<script>
import store from "@/store/store";
export default {
  name: "Homepage",
  data() {
    return {
      Url:
        "http://mall.eshangtech.com:8010/MobileServicePlatform/Handler/handler_ajax.ashx?",
      // popupVisible: true, 
     popupVisible: false, 
      menuImgC: "",
      larger3: "",
      HeadImg: "",
      Name: "",
      menuDiv: false,
      Jurisdiction1: true,
      Jurisdiction2: true,
      Jurisdiction3: true,
      Jurisdiction4: true,
      Jurisdiction5: true,
      Jurisdiction6: true,
      cover: true,
      menuLi: [],
      edit: false,
      vipType: "",
      headMove:'-3.5rem'
    };
  },
  methods: {
    // 菜单
    move: function(val) {
      var routerSrc 
      (val === "/") ? routerSrc = "/HelloWorld" : routerSrc = val
      this.$router.push({ path: "/Homepage"+ routerSrc });
      this.popupVisible = false;
      this.menuDiv = false;
      (val === "/page2") ? this.larger3 = "larger" : this.larger3 = ""
      // let i = 0;
      this.menuLi.forEach(element => {
        if (element.value === val) {
          element.larger = "larger";
          // i++;
        } else {
          element.larger = "";
          // i++;
        }
      });
    },
    // 四叶草动画
    menuImg: function() {
      this.menuImgC = "am-animation-spin";
      this.menuDiv = !this.menuDiv;
      setTimeout(() => {
        this.menuImgC = "";
      }, 500);
    },
    // 获取微信关注者信息
    getWxpeople: function() {
      this.$http
        .get(
          "http://cloud.eshangtech.com:6060/MobileServicePlatform/Handler/handler_ajax.ashx?RegisterType=3&action_type=WechatPushPerson&action_data=" +
            store.state.openid
        )
        .then(response => {
          // alert(JSON.stringify(response))
          // success callback
          this.Name = response.data.RTWECHATPUSHObject[0].NICK_NAME;
          this.HeadImg = response.data.RTWECHATPUSHObject[0].HEADIMAGEURL;
          // alert(this.HeadImg + "," + this.Name);
          // console.log(response);
        })
        .catch(error => {
          // console.log(error);
        });
    },
    // 权限验证
    jurisdiction: function() {
      // console.log(store.state.openid)
      // alert(store.state.openid)
      this.$http
        .get(
          this.Url +
            "action_type=GetModuleAuthority&action_data=" +
            store.state.openid +
            "&action_record=4ef21b1f-aada-49b7-9538-24df20dee1c7"
        )
        .then(response => {
          // console.log('1',response)
          // success callback
          if (response.data.ModuleAuthorityObject.length == 0) {
            this.$http
              .get(
                this.Url +
                  "action_type=GetModuleAuthority&action_data=" +
                  store.state.openid +
                  "&action_record=994cca48-52a8-4164-bea1-7680fd65a400"
              )
              .then(response => {
                // console.log('2',response)
                // success callback
                if (response.data.ModuleAuthorityObject.length == 0) {
                  this.Jurisdiction1 = false;
                  if (this.menuLi[0].value == "/") {
                    this.$router.push({ path: "/Homepage" });
                  }
                  let i = 0;
                  this.menuLi.forEach(element => {
                    if (element.value == "/") {
                      this.menuLi[i].show = this.Jurisdiction1;
                    }
                    i++;
                  });
                }
              })
              .catch(error => {
                // console.log(error);
              });
          }
        })
        .catch(error => {
          // console.log(error);
        });
      this.$http
        .get(
          this.Url +
            "action_type=GetModuleAuthority&action_data=" +
            store.state.openid +
            "&action_record=71e468a7-8688-4cc6-9d53-42e3d616295b"
        )
        .then(response => {
          // console.log('3',response)
          // success callback
          if (response.data.ModuleAuthorityObject.length == 0) {
            this.Jurisdiction5 = false;
            let i = 0;
            this.menuLi.forEach(element => {
              if (element.value == "/page3") {
                this.menuLi[i].show = this.Jurisdiction5;
              }
              i++;
            });
          }
        })
        .catch(error => {
          // console.log(error);
        });
      setTimeout(() => {
        this.$http
          .get(
            this.Url +
              "action_type=GetModuleAuthority&action_data=" +
              store.state.openid +
              "&action_record=6601d41f-8abf-45d9-a71f-a84ddb8b30c0"
          )
          .then(response => {
            // alert(JSON.stringify(response))
            // success callback
            if (response.data.ModuleAuthorityObject.length == 0) {
              this.Jurisdiction2 = false;
              let i = 0;
              this.menuLi.forEach(element => {
                if (element.value == "/page1") {
                  this.menuLi[i].show = this.Jurisdiction2;
                }
                i++;
              });
            }
          })
          .catch(error => {
            // console.log(error);
          });
        setTimeout(() => {
          this.$http
            .get(
              this.Url +
                "action_type=GetModuleAuthority&action_data=" +
                store.state.openid +
                "&action_record=d649bc3a-d25a-47e2-856e-d6fbd649e8f9"
            )
            .then(response => {
              // alert(JSON.stringify(response))
              // success callback
              if (response.data.ModuleAuthorityObject.length == 0) {
                this.Jurisdiction3 = false;
              }
            })
            .catch(error => {
              // console.log(error);
            });
          setTimeout(() => {
            this.$http
              .get(
                this.Url +
                  "action_type=GetModuleAuthority&action_data=" +
                  store.state.openid +
                  "&action_record=2eada261-97e7-4881-998b-06b1cfc290af"
              )
              .then(response => {
                // console.log('5',response)
                // success callback
                if (response.data.ModuleAuthorityObject.length == 0) {
                  this.$http
                    .get(
                      this.Url +
                        "action_type=GetModuleAuthority&action_data=" +
                        store.state.openid +
                        "&action_record=43ecf139-66a7-421b-ba0f-bf7ddd77437d"
                    )
                    .then(response => {
                      // success callback
                      this.cover = false;
                      if (response.data.ModuleAuthorityObject.length == 0) {
                        this.Jurisdiction4 = false;
                        let i = 0;
                        this.menuLi.forEach(element => {
                          if (element.value == "/page4") {
                            this.menuLi[i].show = this.Jurisdiction4;
                          }
                          i++;
                        });
                      }
                    })
                    .catch(error => {
                      // console.log(error);
                    });
                } else {
                  this.cover = false;
                }
              })
              .catch(error => {
                // console.log(error);
              });
              setTimeout(()=>{
                this.$http
                  .get(
                    this.Url +
                      "action_type=GetModuleAuthority&action_data=" +
                      store.state.openid +
                      "&action_record=c10989d3-84ca-4874-9714-22dcce91f808"
                  )
                  .then(response => {
                      // console.log(6,response)
                      this.cover = false;
                      if (response.data.ModuleAuthorityObject.length == 0) {
                        this.Jurisdiction6 = false;
                        let i = 0;
                        this.menuLi.forEach(element => {
                          if (element.value == "/expenses") {
                            this.menuLi[i].show = this.Jurisdiction6;
                          }
                          i++;
                        });
                      }
                  })
              },100)
          }, 100);
        }, 100);
      }, 100);
    },
    // 信息修改
    modify: function() {
      this.$router.push({ path: "/Modify" });
    },
    // 修改图标验证
    editVerification: function() {
      this.$http
        .get(
          this.Url +
            "action_type=GetMembershipInfo&action_record=" +
            store.state.openid +
            "&action_data=" +
            store.state.wxid +
            "&RegisterType=1"
        )
        .then(response => {
          // success callback
          if (response.data.MEMBERSHIP[0].MEMBERSHIP_NAME == "&nbsp;") {
            this.edit = true;
            this.vipType = "";
          } else {
            this.vipType = response.data.MEMBERSHIP[0].MEMBERSHIP_NAME;
          }
          if (response.data.MEMBERSHIP[0].CERTIFICATE_NUMBER == "&nbsp;") {
            this.edit = true;
          }
        })
        .catch(error => {
          // console.log(error);
        });
    }
  },
  watch:{
    '$route'(to, from){
        let url = to.name
        this.menuLi.forEach(item =>{
          if(url === "HelloWorld"){
            url = ""
          }
          if(item.value == '/'+url){
              item.larger = "larger"
          }else {
            item.larger = ""
          }
        })
    }
  },
  created() {
    this.getWxpeople(); // 获取微信关注者信息
    this.editVerification(); // 修改图标验证
    if (store.state.HbusinessType == "0") {

      this.menuLi.splice(0, 5);
      this.menuLi.push(
        {
          name: "业务审批",
          value: "/",
          larger: "larger",
          show: true
        },
        {
          name: "权限审批",
          value: "/page3",
          larger: "",
          show: true
        },
        {
          name: "数据校验",
          value: "/page4",
          larger: "",
          show: true
        },{
          name: "财务报销",
          value: "/expenses",
          larger: "",
          show: true
        },
        {
          name: "通知提醒",
          value: "/page1",
          larger: "",
          show: true
        }
      );
      this.jurisdiction();
    } else if (store.state.HbusinessType == "1") {
      this.menuLi.splice(0, 5);
      this.menuLi.push(
        {
          name: "通知提醒",
          value: "/page1",
          larger: "larger",
          show: true
        },
        {
          name: "业务审批",
          value: "/",
          larger: "",
          show: true
        },
        {
          name: "权限审批",
          value: "/page3",
          larger: "",
          show: true
        },
        {
          name: "数据校验",
          value: "/page4",
          larger: "",
          show: true
        },{
          name: "财务报销",
          value: "/expenses",
          larger: "",
          show: true
        }
      );
      this.jurisdiction();
    } else if (store.state.HbusinessType == "2") {
      this.menuLi.splice(0, 5);
      this.menuLi.push(
        {
          name: "权限审批",
          value: "/page3",
          larger: "larger",
          show: true
        },
        {
          name: "业务审批",
          value: "/",
          larger: "",
          show: true
        },{
          name: "财务报销",
          value: "/expenses",
          larger: "",
          show: true
        },
        {
          name: "通知提醒",
          value: "/page1",
          larger: "",
          show: true
        },
        {
          name: "数据校验",
          value: "/page4",
          larger: "",
          show: true
        }
      );
      this.jurisdiction();
    } else if (store.state.HbusinessType == "3") {
      this.menuLi.splice(0, 5);
      this.menuLi.push(
        {
          name: "数据校验",
          value: "/page4",
          larger: "larger",
          show: true
        },
        {
          name: "业务审批",
          value: "/",
          larger: "",
          show: true
        },
        {
          name: "权限审批",
          value: "/page3",
          larger: "",
          show: true
        },{
          name: "财务报销",
          value: "/expenses",
          larger: "",
          show: true
        },
        {
          name: "通知提醒",
          value: "/page1",
          larger: "",
          show: true
        }
      );
      this.jurisdiction();
    }else if (store.state.HbusinessType == "4") {
      this.menuLi.splice(0, 5);
      this.menuLi.push(
        {
          name: "财务报销",
          value: "/expenses",
          larger: "larger",
          show: true
        },
        {
          name: "业务审批",
          value: "/",
          larger: "",
          show: true
        },
        {
          name: "权限审批",
          value: "/page3",
          larger: "",
          show: true
        },
        {
          name: "数据校验",
          value: "/page4",
          larger: "",
          show: true
        },
        {
          name: "通知提醒",
          value: "/page1",
          larger: "",
          show: true
        }
      );
      this.jurisdiction();
    }
    if(this.$route.path == '/Homepage/expenses'){
        this.menuLi.forEach(item =>{
          if(item.value === '/expenses'){
              item.larger = "larger"
          }else {
            item.larger = ""
          }
        })
    }
  }
};
</script>

<style>
header {
  width: 100%;
  height: 2.75rem;
  background-color: #fff;
  position: fixed;
  z-index: 100;
}
.people {
  width: 70%;
  height: 100%;
  background-color: #fff;
}
.information {
  text-align: center;
  padding: 1.5rem;
}
.headimgurl {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 4.5rem;
  margin: 1rem 0 0 0;
}
.name {
  font-size: 22px;
}
.vip {
  width: 5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  margin: 0 auto;
}
.vipImg {
  margin-top: -0.3rem;
}
.vipType {
  color: #636363;
  font-size: 14px;
}
.information .menu {
  text-align: left;
  margin-top: 2.5rem;
  font-size: 16px;
  position: relative;
}
.information .menu-p {
  padding: 0.55rem 0 0.55rem 1rem;
}
.information .menu-pImg {
  float: left;
  margin-right: 0.5rem;
}
.information .menu-pSpan {
  float: left;
  margin-top: 0.1rem;
}
.informationImg {
  float: left;
  margin: 0.9rem;
}
.hiddenscorll {
  height: 2.74rem;
  overflow: hidden;
  width: 13rem;
  float: left;
}
.head {
  width: 13rem;
  overflow-y: hidden;
  overflow-x: auto;
  height: 3.2rem;
}
.head_ul {
  width: max-content;
  height: 2.74rem;
  line-height: 2.74rem;
  transition: All 0.4s ease-in-out;
  -webkit-transition: All 0.4s ease-in-out;
  -moz-transition: All 0.4s ease-in-out;
  -o-transition: All 0.4s ease-in-out;
}
.head_ul li {
  display: inline-block;
  width: 3.5rem;
  text-align: center;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.larger {
  color: #ec9061;
  font-size: 16px;
}
.menuImg {
  float: left;
  margin: 1rem;
}
.menu-div {
  width: 100%;
  height: 10rem;
  padding: 0.75rem;
  background-color: #fff;
  text-align: center;
  position: fixed;
  top: 2.75rem;
}
.menu-div p {
  margin-bottom: 0.75rem;
}
.menu-fun {
  width: 25%;
  float: left;
  text-align: center;
  margin-top: 0.5rem;
}
.menu-fun p {
  margin: 0;
}
.cover {
  width: 100%;
  height: 3rem;
  position: fixed;
  top: 0;
}
</style>
